<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style type="text/css">
            .knob-container {
                display: inline-block;
                padding: 10px;
            }
        </style>
    </ui:define>

    <ui:define name="title">
        Knob
    </ui:define>

    <ui:define name="description">
        Knob's useful to insert numeric values in a range.
    </ui:define>

    <ui:param name="documentationLink" value="/components/knob" />

    <ui:define name="implementation">
        <p:growl>
            <p:autoUpdate />
        </p:growl>

        <h3 style="margin-top:0">Basic</h3>
        <div class="knob-container ui-corner-all">
            <p:knob value="#{knobView.value}">
                <p:ajax listener="#{knobView.onChange}"/>
            </p:knob>
        </div>

        <h3>Max,Min and Step</h3>
        <div class="knob-container  ui-corner-all">
            <p:knob max="1000" step="50" value="950"/>
        </div>

        <h3>Show/Hide label</h3>
        <div class="knob-container  ui-corner-all">
            <p:knob showLabel="false" value="65"/>
        </div>

        <h3>Label template</h3>
        <div class="knob-container  ui-corner-all">
            <p:knob labelTemplate="{value}%" value="35"/>
        </div>

        <h3>Disabled</h3>
        <div class="knob-container ui-corner-all">
            <p:knob disabled="true" value="85"/>
        </div>

        <h3>Cursor</h3>
        <div class="knob-container ui-corner-all">
            <p:knob cursor="true" value="0"/>
        </div>

        <h3>Thickness</h3>
        <div class="knob-container ui-corner-all">
            <p:knob thickness=".5" value="50"/>
        </div>

        <h3>Theme</h3>
        <div class="knob-container ui-corner-all">
            <p:knob colorTheme="hot-sneaks" value="45"/>
        </div>

        <h3>Colors</h3>
        <div class="knob-container ui-corner-all">
            <p:knob foregroundColor="red" backgroundColor="#00000" value="25"/>
            <p:knob foregroundColor="#808080" backgroundColor="#0000FF" value="75"/>
        </div>
    </ui:define>

</ui:composition>
